<template>
  <div class="wrapper">
    <common-header :title="title"></common-header>
    <div class="card-container">
      <div class="card"
           :class={changeBgc:isyes}>
        <div class="header">
          <div class="author-img">
            <span class="iconfont">&#xe713;</span>
          </div>
          <div class="title">大微通</div>
        </div>
        <div class="card-num">6666666666666666</div>
        <div class="validity">有效期至：2019-12-30</div>
      </div>
      <div class="desc">温馨提示: 如不领取大微卡，则不能享受大微专属优惠。 点击下方领取按钮，确认领卡</div>
    </div>
    <div class="getCard"
         @click="handleGetCard">领取我的大微卡</div>
  </div>
</template>

<script>
import {
  Toast
} from 'vant'
import CommonHeader from 'common/header/Header'
export default {
  name: 'MeTonghui',
  components: {
    CommonHeader
  },
  data () {
    return {
      title: '大微通惠',
      isyes: false
    }
  },
  methods: {
    handleGetCard () {
      this.isyes = true
      if (this.isyes) {
        Toast({
          message: '已经领取',
          duration: 1000,
          forbidClick: true
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  z-index 5
  background-color $bgcWh

  .card-container
    width 100%
    height 100%
    padding-top 20px
    box-sizing border-box
    padding-left 76px
    padding-right 76px

    .card
      width 100%
      border-radius 6px
      backgroundLiner(#676767, #929292)
      padding-top 24px
      padding-bottom 24px
      padding-left 40px
      padding-right 40px
      box-sizing border-box
      margin-bottom 25px

      .header
        display flex
        align-items center

        .author-img
          width 42px
          height 42px
          background-color $bgcWh
          border-radius 50%
          display flex
          justify-content center

          span
            font-size $fzFifth
            display flex
            justify-content center
            align-items center

        .title
          font-size $fzSecond
          color $whiteFzClor
          line-height 45px
          margin-left 24px

      .card-num
        line-height 132px
        font-size $fzFifth
        color $whiteFzClor
        margin-bottom 52px

      .validity
        line-height 40px
        font-size $fzFifth
        color $whiteFzClor

    .desc
      line-height 36px
      text-align center
      font-size $smallFz
      color $graySecond

    .changeBgc
      backgroundLiner($linerFrom, $linerTo)

  .getCard
    width 100%
    position absolute
    bottom 0
    left 0
    height 104px
    background-color $bgcOne
    color $whiteFzClor
    font-size $fzThird
    text-align center
    line-height 104px
</style>
